.user-module  {
  .common-style {
   .style-charge {
      ul {
        li {
          width: 50%;
          box-sizing: border-box;
          height: 2.14rem;
        }
      }
    } 
  }

  .charge-company {

    .style-charge {
      ul {
        li.active {
          a {
            color: #fff;
          }
        }
      }
    }

    .tips {
      span {
        line-height: 120%;
      }
    }

    .operation-charge {
      ul {
        li {
          > div {
            .icon-checkbox {
              display: inline-block;
              width: 1.7rem;
              height: 1.7rem;
              vertical-align: middle;
              position: absolute;
              right: 0px;
              top: 1.8rem;
            }
          }
        }
      }
    }
  }

 .charge-quick {

    .style-charge {
      ul {
        li.active {
          color: #fff;
          background: #76c5f0;
          border-color: #76c5f0; 

          a {
            color: #fff;
          }
        }
      }
    }

    .operation-charge {
      h2 {
        input {
          border: none;
          width: 7.16rem;
          text-align: right;
        }
      }
    }
  } 
}

i.icon-checkbox {
  background-image: url(../misc/images/userCenter/check-default.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 2px;
}

i.icon-checkbox.icon-checkbox-checked {
  background-image: url(../misc/images/userCenter/check-checked.png) ;
  background-position: 0 2px;
}

@mixin icon-charge-common {
  background-image: url(../misc/images/userCenter/company-charge-icon.png);
  background-size: 3.6rem;
  background-repeat: no-repeat;
}

.icon-bank {
  display: inline-block;
  width: 3.7rem;
  height: 2.7rem;
  @include icon-charge-common;
}

.icon-wechat {
  display: inline-block;
  width: 3.7rem;
  height: 2.76rem;
  background-position: 0 -2.6rem;
  @include icon-charge-common;
}

.icon-cft {
  display: inline-block;
  width: 3.7rem;
  height: 2.76rem;
  background-position: 0 -5.5rem;
  @include icon-charge-common;
}

.icon-alipay {
  display: inline-block;
  width: 3.7rem;
  height: 2.76rem;
  background-position: 0 -8.4rem;
  @include icon-charge-common;
}

.form-type2 {
  
  .inner {
    padding: 0px 2rem;
    margin-top: 2.67rem;
  }

  .btn-wrap {
    margin-top: 2rem;
  }

  .timepicker {
    float: right;
    height: 3.06rem;
    line-height: 3.06rem;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding-left: 7rem;

    .tpwrap {
      background: #e8e8e6;
      border-radius: 2rem;
      position: relative;
      height: 2.06rem;
      line-height: 2.06rem;
      margin-top: .5rem;

      &:before {
        display: block;
        content: "";
        width: 1.5rem;
        height: 1.3rem;
        background-image: url(../misc/images/userCenter/userCenter-icon.png);
        position: absolute;
        top: 50%;
        right: 5px;
        background-position: -1.8rem -7.7rem;
        background-size: 8rem;
        background-repeat: no-repeat;
        margin-top: -.7rem;
      }
    }
  }

  .selectbox {
    float: right;
    height: 2.06rem;
    line-height: 2.06rem;
    text-align: center;
    width: 100%;
    padding-left: 7rem;
    box-sizing: border-box;
    margin-top: .5rem;

    .sbwrap {
      border-radius: 2rem;
      position: relative;
      background: #c2c2c2;
      .cont {
        margin-right: .5rem;
        position: relative;
        display: inline-block;

        &.placeholder {
          color: #757472;
        }
      }

      &:before {
        display: block;
        content: "";
        width: .7rem;
        height: .7rem;
        position: absolute;
        top: .6rem;
        right: .6rem;
        border-top: 1px solid #3f3f3f;
        border-right: 1px solid #3f3f3f;
        transform : rotate(45deg);
      }

      select {
        margin-right: 0.5rem;
        opacity: 0;
        display: inline-block;
        left: 0px;
        top: 0px;
        position: absolute;
        width: 100%;
        height: 100%;
      }
    }
  }

  .datetime-picker {
    float: right;
    height: 2.06rem;
    line-height: 2.06rem;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    margin-top: .5rem;
    padding-left: 7rem;
    background: #fff;
    border: none;
    padding-top: 0px;
    padding-bottom: 0px;

    .datetime-viewer {
      background: #e8e8e6;
      border-radius: 2rem;
      position: relative;
    }
  }

  .form-group {
    border-bottom: 1px solid #b7b7b7;
    position: relative;
    height: 3.06rem;

    &:before {
      content: "";
      display: inline-block;
      width: 0.9rem;
      height: 0.9rem;
      border-radius: .9rem;
      background: #85c226;
      margin-right: .73rem;
      position: absolute;
      top: 50%;
      margin-top: -.4rem;
      z-index: 1;
    }

    label {
      position: absolute;
      left: 2rem;
      height: 1rem;
      top: 50%;
      margin-top: -.5rem;
      z-index: 1;
    }

    .rdt {
      display: inline;
    }

    input {
      border: none;
      height: 3.06rem;
      line-height: 3.06rem;
      font-size: 1rem;
      text-indent: 1.67rem;
      text-align: right;
      float: right;
      width: 100%;
      padding-left: 7rem;
      box-sizing: border-box;
      
      &.disabled {
        color: #484848;
        background: #fff;
      }
    }
  }
}

.timepicker {
  display: inline-block;
  @include clearfix;

  .tp-item {
    float: none;
    margin-right: .5rem;
    display: inline-block;

    span.num {
      position: relative;
    }

    select {
      margin-right: 0.5rem;
      opacity: 0;
      display: inline-block;
      left: 0px;
      top: 0px;
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 111;
    }
  }
}

.selectbox {
  @extend .timepicker;


}

.datetime-picker {
  display: inline-block;

  .date {
    margin-right: .5rem;
    position: relative;
    display: inline-block;
  }

  .time {
    position: relative;
    display: inline-block;
  }

  .tp-item {
    position: absolute;
    left: 0px;
    top: 0px;
    padding-left: 0px;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 111;
  }

  input[type="date"] {
    position: absolute;
    left: 0px;
    top: 0px;
    padding-left: 0px;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 111;
  }
}

.bank-items {

  margin-top: 1.16rem;
  a{
    .bank-item{
      border-top: 1px solid #e4e4e4;
    }
    &:last-child {
      .bank-item{
        border-bottom: 1px solid #e4e4e4;
      }
    }
  }
  .inner{
    >div{
      &:last-child {
        .bank-item{
          border-bottom: 1px solid #e4e4e4;
        }
      }
    }
  }
  .bank-item {
    @include clearfix;
    padding-left: 2.4rem;
    padding-right: 3.53rem;
    box-sizing:border-box;
    border-top: 1px solid #e4e4e4;
    .inner {
      position: relative;
    }
    

  }

  .icon {
    position: absolute;
    left: 0px;
    top: 50%;
    margin-top: -1.36rem;

    &.icon-arrow-right {
      left: auto;
      right: -2rem;
      top: 50%;
      margin-top: -.5rem;
    }
  }

  .bank-detail {
    width: 100%;
    height: 3.66rem;
    margin: auto;
    box-sizing: border-box;
    padding: .66rem 0px;
    padding-left: 5rem;

    .bd-top {
      @include clearfix;
    }

    .name {
      float: left;
    }

    .account {
      float: right;
    }

    .number {
      float: left;
      width: 100%;
      margin-top: .3rem;
      font-weight: bold;
    }
  }
}

.link-add-bank {
  width: 100%;
  text-align: center;
  margin-top: 2.27rem;
  display: block;
  color: #7dc2eb;
  text-decoration: underline;
}

.icon-plus {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  margin-right: 1rem;
  vertical-align: middle;
  background: url(../misc/images/add-icon.gif);
  background-size: 100%;
  
}

.icon-arrow-right {
  display: inline-block;
  width: .5rem;
  height: 1rem;
  background-image: url(../misc/images/userCenter/arrow-icon.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.charge-company .icon-arrow-right {
  position: absolute;
  right: 0px;
  top: 50%;
  margin-top: -.25rem;
}

.withdraw-form-page  {
  .bank-info {
    margin-top: 1.83rem;

    .inner {
      padding: 0px 2rem;
    }
  }
}

.border0{
  border: 0 !important;
}
@mixin bank-info {

  padding: 0px 2.4rem;

  h2 {
    font-size: 1.2rem;
    // text-indent: 1.1rem;
  }

  span {
    color: #787878;
    font-size: 1rem;
  }

  ul {
    margin-top: .83rem;
  }

  li {
    height: 1.6rem;
    line-height: 1.6rem;
    // border-bottom: 1px solid #e9e9e9;
    // text-indent: 1.1rem;
  }
}

.bank-info {
  
  @include bank-info;
  padding: 0px 0.4rem;
}

.form-type2 {
  .tip {
    text-align: center;
    color: #81807e;
    margin-top: .67rem;
  }
}

.user-detail-info {
  @include bank-info;

  li {
    border: none;
    span:first-child{
      display: inline-block;
      width: 5rem;
      text-align: justify;
      text-align-last: justify;
    }
  }
}

.user-security-info {
  @include bank-info;

  li {
    border: none;
  }
}

.user-info-page {
  .user-security-info {
    margin-top: 1.67rem;
    border-bottom: 1px solid #e9e9e9;
    padding-bottom: .67rem;
  }

  .user-detail-info {
    @extend .user-security-info;
  }

  .bank-info {
    @extend .user-security-info;
  }
}
.user-security-info {
  ul{
    .word-color{
      span{
        color: #000;
      }
    }
  }
}
.message-items {
  >p {
    text-align: center;
    margin-top: 1rem;
  }
}

.user-module .oredr-page .user-order-list ul li .show-balance {
  display: inline-block;
  min-width: 4rem;
  text-align: center;
}

.charge-record-item {
  position: relative;
}

.order-info-list {
  p.no-data {
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    background: #fff;
  }
}

.loader {
  height: 3rem;
  line-height: 3rem;
  text-align: center;
}

.view-me {
  display: block !important;
}

.user-module .oredr-page .user-order-info .order-info-list .content {
  li {
    box-sizing: border-box;
  }
}

.no-data {
  height: 3rem;
  line-height: 3rem;
  text-align: center;
}

.date-filter {
  @include clearfix;

  padding: .833rem 1.06rem;

  .start-date-txt {
    float: left;
    width: 50%;
    box-sizing: border-box;
    text-align: left;
    padding: 0px 0.5rem;
    position: relative;
  }

  .end-date-txt {
    @extend .start-date-txt;
  }
}

.datetime-picker {
  display: inline-block;
  width: 100%;
  background: #eee;
  padding: 0.47rem 0px;
  border-radius: 10px;
  border: 1px solid #969593;
  position: relative;

  .date {
    margin-left: 1rem;
    width: 90%;
  }

  &:after {
    display: block;
    content: "";
    width: 1.5rem;
    height: 1.3rem;
    background-image: url(../misc/images/userCenter/userCenter-icon.png);
    position: absolute;
    top: 50%;
    right: 5px;
    background-position: -1.8rem -7.7rem;
    background-size: 8rem;
    background-repeat: no-repeat;
    margin-top: -.7rem;
  }
}

.message-item {
  position: relative;
  .del-btn {
    display: none;
    width: 2.77rem;
    height: 1.6rem;
    color: #fff;
    text-align: center;
    position: absolute;
    line-height: 1.7rem;
    border-radius: 5px;
    right: 7%;
    top: 50%;
    margin-top: -1.1rem;
    font-size: .9rem;
  }
}

.waring {
  text-align: center;
  padding: 2rem 0px 0px 0px;
}

.icon-animate-rotate {
  -webkit-animation: animate-rotate 1.2s infinite linear;
  animation: animate-rotate 1.2s infinite linear;
}

.icon-animate-pause {
  -webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
  animation-play-state: paused;
}

@keyframes animate-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

@-webkit-keyframes animate-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

.stick-layout {
  
  padding: .83rem 0px;
  box-sizing: border-box;
  border-bottom: 1px solid #f7f7f7;

  .inner {
    @include clearfix;
    position: relative;
    padding-right: 1rem;

    $image_width: 1.87rem;

    > .image {
      width: $image_width;
      height: 1.87rem;
      position: absolute;
      top: 50%;
      margin-top: -.93rem;

      img {
        width: 100%;
      }
    }

    > .content {
      margin-left: $image_width + 0.67rem;
      display: inline-block;
      vertical-align: middle;
    }

    &:after {
      content: ">";
      position: absolute;
      right: 0px;
      height: 0px;
      width: 1rem;
      height: 1rem;
      color: #777777;
      top: 0px;
    }
  }
}

.user-module {
  h3.mod-title {
    background: #eeeeee;
    color: #9c9c9d;
    line-height: 200%;
    padding: 0px 7%;
  }
}

.form-notice {
  padding: 0.67rem 0px;
  position: relative;

  p {
    text-align: left;
    color: #a09e9f;
    padding-left: 2rem;
    padding-right: 2rem;

    &:before {
      position: absolute;
      left: 0px;
      top: 50%;
      content: "";
      display: block;
      background: url(../misc/images/notice.png);
      width: 2rem;
      height: 2rem;
      background-size: 100%;
      background-repeat: no-repeat;
      margin-top: -.9rem;
    }
  }
}

.charge-form {
  img {
    width: 50%;  
    display: block;
    margin: 0px auto .67rem auto;
  }

  p.name {
    text-align: center;
    color: #828282;
  }
}

.form-type2.company-charge-form {
  
  .inner {
    margin-top: 0px;
  }

  .company-info {

    .stick-layout  {
      border-top: 0.8rem solid #eee;
      border-bottom: 0.8rem solid #eee;

      .inner {
        &:after {
          display: none;
        }
      }
    }

    .company-info-desc {
      .row:nth-child(1) {
        color: #848484;
        @include clearfix;
        padding-bottom: .5rem;
        border-bottom: 1px solid #eaeaea;
        margin-bottom: .5rem;

        span {
          display: inline-block;
        }

        span:nth-child(1) {
          float: left;
        }

        span:nth-child(2) {
          float: right;
        }
      }

      .row:nth-child(2) {
        p {
          margin-bottom: .5rem;
        }

        p:nth-child(1) {
          font-size: 1.3rem;
        }

        p:nth-child(2) {
          color: #848484;
        }
      }
    }
  }
}

.form-type2.company-charge-form {
  .thirdpay-info {
    .company-info-desc {
      .row:nth-child(2) {
        @include clearfix;
        p {
          font-size: .8rem;
          color: #848484;

          &:nth-child(1) {
            float: left;
            font-size: .8rem;
            color: #848484;
          }

          &:nth-child(2) {
            float: left;
          }
        }
      }
    }
  }
}